<template>
  <div class="type">
    <div class="ttop">
      <span v-on:click="back()" class="iconfont">&#xe779;</span>
      <p class="mytype">{{ mytype }}</p>
    </div>
    <div class="mytype">
      <sort></sort>
      <router-view />
    </div>
  </div>
</template>
<style lang="scss">
.type {
  .ttop {
    top: 0;
    position: fixed;
    width: 100%;
    height: 50px;
    background-color: rgb(22, 187, 250);
    display: flex;
    span {
      width: 50px;
      height: 50px;
      text-align: center;
      line-height: 50px;
      font-weight: bold;
      color: white;
    }
    p {
      font-size: 18px;
      font-weight: bold;
      color: white;
      width: 100%;
      line-height: 50px;
      text-align: center;
      margin: 0;
      padding: 0;
      margin-left: -20px;
    }
  }
  .mytype {
    margin-top: 50px;
  }
}
</style>
<script>
import Sort from "../components/sort.vue";
export default {
  name: "type",
  components: {
    Sort,
  },
  data() {
    return {
      arr1: [],
      mytype: "",
    };
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
  },
  mounted() {
    let str = this.$route.query.type;
    switch (str) {
      case "cytp":
        this.mytype = "茶饮甜品";
        break;
      case "csbl":
        this.mytype = "商超便利";
        break;
      case "xysk":
        this.mytype = "宵夜烧烤";
        break;
      case "sgdg":
        this.mytype = "水果蛋糕";
        break;
      case "bmfw":
        this.mytype = "便民服务";
        break;
      case "add":
        this.mytype = "更多商家";
        break;
      default:
        this.mytype = "搜索结果";
    }
  },
};
</script>